<template>
  <transition>
    <div class="repair-store-order">

      <section class="app-main">
        <div class="module-block">
          <div class="block-header" style="padding-top: 10px;">*建议提供车架号、整车图、破损部位等图片。</div>

          <dl class="img-upload-content me-row">
            <dd class="item me-col-3" v-for="(item,index) in files">
              <span class="iconfont icon-shanchu" @click="handleDelImg(index,item)"></span>
              <img class="img" :src="item.src"/>
            </dd>
            <dd class="item me-col-3 item-add " @click="handleSelectImg">
              <span class="iconfont add-img icon-jiahao"></span>
            </dd>
          </dl>
        </div>
        <div class="module-block">
            <mt-field label="汽车品牌:"  type="text" v-model="carModel" readonly="readonly"></mt-field>
            <mt-field label="预约时间:" placeholder="请选择日期" type="text" v-model="allotDateStart" readonly="readonly" @click.native="openPicker('start')"></mt-field>
            <mt-cell
              title="选择时段:" class="mint-field select-time-slot" v-if="isShowDateList">
              <dl class="date-list">
                <dd class="date-item" v-for="(item,index) in dateList" :class="{active:curIndex==index}" @click="handleSelectDate(item,index)">
                  <span class="date-title">{{item}}</span>
                </dd>
              </dl>
            </mt-cell>
          <mt-cell
            title="服务方式:" class="mint-field">
            <dl class="date-list">
              <dl class="date-list service-list">
                <dd class="date-item" v-for="(item,index) in selectGoAttr" :class="{active:curIndexService==index}" @click="handleSelectService(item,index)">
                  <span class="date-title">{{item.title}}</span>
                </dd>
              </dl>
            </dl>
          </mt-cell>
          <template v-if="selectService.itemType=='4101'">
            <!--<mt-field label="联系人" placeholder="请输入联系人" v-model="linkMan"></mt-field>-->
            <mt-field label="联系电话" placeholder="请输入联系电话" v-model="linkPhone" type="number"></mt-field>
            <mt-field label="作业地点" placeholder="请输入作业地点" v-model="address"><span class="iconfont icon-didian1" @click="handleSelectAddress"></span></mt-field>
          </template>

          <mt-cell
          title="捎话:" class="mint-field" is-link @click.native="showComments=!showComments">
          </mt-cell>
          <div class="mint-field-comments" :class="{active:showComments}">
            <!--<dl class="service-list comment-attr-list">-->
              <!--<dd class="date-item" v-for="(item,index) in commentAttr" :class="{active:curIndexComment==index}" @click="handleSelectComment(item,index)">-->
                <!--<span class="date-title">{{item.title}}</span>-->
              <!--</dd>-->
            <!--</dl>-->
            <textarea v-model="comments" class="item-textarea" placeholder="给派派捎句话" oninput="this.style.height=this.scrollHeight + 'px'"></textarea>
          </div>

          <mt-datetime-picker
            ref="picker"
            v-model="pickerValue"
            type="date"
            month-format="{value} 月"
            date-format="{value} 日"
            :startDate="startDate"
            :endDate="endDate"
            @confirm="handleDateChange">
          </mt-datetime-picker>
        </div>
        <div class="button-content-bottom">
          <mt-button type="primary" @click.native="handleToPay">立即预约询价</mt-button>
        </div>
        <!--图片大图弹窗-->
        <mt-popup
          v-model="popupSwiper"
          position="middle" class="me-popup-pic">
          <popup-swiper v-bind:picList="picList" @popupSwiperClose="handleCloseSwiper"></popup-swiper>
        </mt-popup>
        <!--图片大图弹窗-->

        <!--地图弹窗-->
        <mt-popup
          v-model="popupMap"
          position="right" class="popup-map">
          <map-select v-if="isSelectMap" @mapData="getMapData" @mapClose="handleMapClose"></map-select>
        </mt-popup>
        <!--地图弹窗-->

      </section>
    </div>
  </transition>
</template>

<script>
  import { Navbar,Button,MessageBox,Toast ,Checklist,Cell,DatetimePicker,Indicator} from 'mint-ui';
  import popupSwiper from '../common/popup-swiper';
  import mapSelect from '../common/map-select';
  export default {
    components:{
      popupSwiper,
      mapSelect
    },
    data () {
      return {
        carModel:'',
        commentAttr:[{
          title:'更换',
          price:50
        },
          {
            title:'修复',
            price:50
          },{
            title:'单拆',
            price:50
          },{
            title:'单装',
            price:50
          }
        ],
        showComments:true,
        comments:'',
        myCount:1,
        res:'',
        picList:[],
        popupSwiper:false,
        isShowDateList:false,
        dateList:['08:00~12:00','14:00~18:00'],
        dateRange:'',
        priceFare:10,
        priceNum:0,
        state:'待处理',
        curIndex:-1,
        priceService:10,
        curIndexService:0,
        curIndexComment:0,
        selectService:{title:'到店',itemType:4102},
        allotDateStart:'',
        selectPriceAttr:[],
        selectGoAttr:[{title:'到店',itemType:4102},{title:'上门',itemType:4101}],
        pickerValue:new Date(),
        startDate:new Date(),
        endDate:new Date(new Date().getTime()+2 * 24 * 3600 * 1000),
        otherPrice:[],
        currentActive:0,
        form:{},
        noneImg:'./static/img/img-none.jpg',
        url:'',
        wxConfig:'',
        accessToken:'',
        files:[],
        mediaAttr:[],
        linkMan:'',
        myUploads:[],
        linkPhone:'',
        address:'',
        xAxis:'',
        yAxis:'',
        popupMap:false,
        isSelectMap:false,
        bookTimeStart:'',
        bookTimeEnd:'',
        items:[],
      }
    },
    beforeRouteEnter (to, from, next) {
      var u = navigator.userAgent;
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      // XXX: 修复iOS版微信HTML5 History兼容性问题
      if (isiOS && to.path !== location.pathname) {
        // 此处不可使用location.replace
        location.assign(to.fullPath)
      }else {
        next()
      }
    },
    created(){
//         this.mediaAttr= [{ "serverId": "oInT0qzmThz7g5RapzXcUHMUhFF3SNw5Klh50ZBTOmMfFNtKNkt7NCKBULMMNY1H", "tag": "", "fileLocate": "" }, { "serverId": "8F-ATZY4CPnjyWhM7fe4oOsHGFr2aAAbMrIxDDTPiTmqmiefSqSAfG_sN55HGI2M", "tag": "", "fileLocate": "" }, { "serverId": "H0-w2uJhUp7LnR_lVyslWt8mHWZUh-cbyTawjmHUsaV43gpQwVNV1lPoMLCKaOXh", "tag": "", "fileLocate": "" } ]
      this.comments=this.$route.query.class
      this.carModel=this.$route.query.name+" - "+this.$route.query.class;
      //  调取微信配置接口
      this.url=location.href;
      var params = new URLSearchParams();
      params.append('url',this.url);
      this.$axios({
        method: 'post',
        url:'gp/bu/wechat!getJsapi.do',
        data:params
      }).then((res)=> {
        this.wxConfig=res.data.object;

      this.accessToken=res.data.object.accessToken;
      this.$wx.config({
        beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: this.wxConfig.appid, // 必填，企业微信的corpID
//      appId: 'wxd05b751d02449b6a', // 必填，企业微信的corpID
        timestamp:this.wxConfig.timestamp, // 必填，生成签名的时间戳
        nonceStr: this.wxConfig.nonceStr, // 必填，生成签名的随机串
        signature: this.wxConfig.signature,// 必填，签名，见附录1
        jsApiList: ['chooseImage','uploadImage','getLocalImgData','downloadImage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      });
    });
    },
    methods:{
      handleSelectAddress(){
        this.popupMap=true;
        this.isSelectMap=true;
      },
      handleDelImg(index,item){
        this.files.splice(index, 1);
        this.mediaAttr.splice(index, 1);
      },
      handleSelectImg(){
        this.$wx.ready(()=>{
          var u = navigator.userAgent;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

        var _this=this;
        var syncUpload = function(localIds){
          var localId = localIds.pop();
          _this.$wx.uploadImage({
            localId: localId.toString(), // 需要上传的图片的本地ID，由chooseImage接口获得
            isShowProgressTips:1, // 默认为1，显示进度提示
            success: function (res) {
              //res.serverId 返回图片的服务器端ID
              var serverId = res.serverId; // 返回图片的服务器端ID
              const item={
                serverId:res.serverId,
                tag : '',
                fileLocate:'',
              }
              _this.mediaAttr.push(item);
              if(localIds.length > 0){
                window.setTimeout(function(){
                  syncUpload(localIds);
                },100);
              }else{
                window.setTimeout(function(){
                  downloadImage(0);
                },100);

              }
            }
          })
        }
        _this.$wx.chooseImage({
          count: 9, // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          defaultCameraMode: "batch", //表示进入拍照界面的默认模式，目前有normal与batch两种选择，normal表示普通单拍模式，batch表示连拍模式，不传该参数则为normal模式。（注：用户进入拍照界面仍然可自由切换两种模式）
          success: function (res) {

            var localIds = res.localIds; // 返回选定照片的本地ID列表，

            for(var i=0;i<localIds.length;i++){
              if(isiOS==true){

                _this.$wx.getLocalImgData({
                  localId: localIds[i], // 图片的localID
                  success: function (res) {
                    var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
                    const item={
                      src:localData,
                      tag : '',
                      fileLocate:'',
                    };
                    _this.files.push(item);
                    console.log(_this.files);

                  },
                  fail: function(res) {
                    console.log(res)
                  }
                });
              }else{
                const item={
                  src:localIds[i],
                  tag : '',
                  fileLocate:'',
                };
                _this.files.push(item);
              }
            }

            syncUpload(res.localIds)
            // andriod中localId可以作为img标签的src属性显示图片；
            // 而在IOS中需通过上面的接口getLocalImgData获取图片base64数据，从而用于img标签的显示
          }
        });
      })
      },
      openPicker(type) {
        this.$refs.picker.open();
      },
      handleDateChange(){
        const d = new Date(this.pickerValue);
        const year=d.getFullYear();
        var month='';
        var date='';
        if(d.getMonth()+1<=9){
          month='0'+(d.getMonth()+1)
        }else{
          month=d.getMonth()+1
        };
        if(d.getDate()+1<=10){
          date='0'+d.getDate()
        }else{
          date=d.getDate()
        };
          this.startTime=d.getTime();
          this.allotDateStart=year + '-' + month + '-' + date;

        this.curIndex=-1;
        this.dateRange='';
        if(this.allotDateStart!=''){
          this.isShowDateList=true;
        }
      },
      handleSelectDate(item,index){
        this.curIndex=index;
        this.dateRange=item;
        this.bookTimeStart=this.allotDateStart+' '+item.split('~')[0];
        this.bookTimeEnd=this.allotDateStart+' '+item.split('~')[1];
        console.log(this.bookTimeStart,this.bookTimeEnd)
      },
      handleSelectService(item,index){
        this.curIndexService=index;
        this.selectService=item;
        this.priceService=item.price
      },
      handleSelectComment(item,index){
        this.curIndexComment=index;

      },
      handleCheckPic(){
        this.popupSwiper=true;
      },
      handleCloseSwiper(){
        this.popupSwiper=false;
      },
      /**获取oss配置**/
      getOss(){
        let OSS = require('ali-oss');
        this.client = new OSS({
          region: "oss-cn-shenzhen",
          secure: true,//https
          endpoint: 'oss-cn-shenzhen.aliyuncs.com',
          accessKeyId: "LTAIPCNdQvX5yOwc",
          accessKeySecret: "7bReGAz8bc9aJdK4IAz5KW5fnNOzrQ ",
          bucket: 'rmcbapp'
        });
      },
      toBuffer(ab) {
        var buf = new Buffer(ab.byteLength);
        var view = new Uint8Array(ab);
        for (var i = 0; i < buf.length; ++i) {
          buf[i] = view[i];
        }
        return buf;
      },
      handleMapClose(){
        this.popupMap=false;
      },
      getMapData(data){
        this.address=data.address;
        this.xAxis=data.xAxis;
        this.yAxis=data.yAxis;
      },
      handleToPay(){
        if(this.allotDateStart==''){
          Toast({
            message: '请选择预约时间',
            position: 'middle',
            duration:1000
          });
          return false;
        }
        if(this.dateRange==''){
          Toast({
            message: '请选择预约时段',
            position: 'middle',
            duration:1000
          });
          return false;
        }
//        if(this.selectService.title=='上门'){
//          var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
//          if(!myreg.test(this.linkPhone)){
//            Toast({
//              message: '请输入正确的联系电话',
//              position: 'middle',
//              duration:1000
//            });
//            return false;
//          }
//          if(this.address==''){
//            Toast({
//              message: '请填写联系地址',
//              position: 'middle',
//              duration:1000
//            });
//            return false;
//          }
//        }
        this.getOss();
        var that=this;
        that.myUploads=[];
        if(that.mediaAttr.length>0){
          for(var i=0;i<that.mediaAttr.length;i++){
            const mediaId = that.mediaAttr[i].serverId; // 微信多媒体文件id
            const fileLocate = that.mediaAttr[i].fileLocate; // 微信多媒体文件id
            const tag = that.mediaAttr[i].tag; // 微信多媒体文件id
            if(tag==''){
              Indicator.open({
                text: '预约提交中...',
                spinnerType: 'snake'
              });
              that.$axios({
                method: 'get',
                url:'wx/cgi-bin/media/get?access_token='+that.accessToken+'&media_id='+mediaId,
                responseType:'arraybuffer',
              }).then((res)=>{
                // arrayBuffer转Buffer
                var buffer = that.toBuffer(res.data);
              var destPath = 'erpDemand/'+mediaId+'.jpg'; // OSS文件路径
              console.log(buffer)
              var postitem={}
              that.client.put(destPath, buffer).then((result) => {

                console.log('图片上传阿里云结果', result);
              var item='https://rmcbapp.oss-cn-shenzhen.aliyuncs.com/'+result.name;

              postitem={
                bucketName:'rmcbapp',
                fileLocate:'',
                fileType:0,
                sourceFileName:mediaId+'.jpg',
                ossPath:result.name,
                ossKey:'rmcbapp/'+result.name,
//                etag:result.res.headers.etag
                etag:''
              }
//              that.post.uploads.push(postitem);
              that.myUploads.push(postitem);
              if(that.myUploads.length==i){
                var params = new URLSearchParams();
                const postData={
                  carModel:that.$route.query.name,
                  uploads:that.myUploads,
                  bookTimeStart:that.bookTimeStart,
                  bookTimeEnd:that.bookTimeEnd,
                  linkPhone:that.linkPhone,
                  linkAddress:that.address,
                  xAxis:that.xAxis,
                  yAxis:that.yAxis,
                  linkMan:that.linkMan,
                  remark:that.comments,
                  serviceType:that.selectService.itemType
                };
                params.append('demandData',JSON.stringify(postData));
                that.$axios({
                  method: 'post',
                  url:'gp/app/bookingOrderApp!saveBooking.do',
                  data:params
                }).then((res)=>{
                if(res.data.result==true){
                  Indicator.close();
                  Toast({
                    message: '预约提交成功',
                    position: 'middle',
                    duration:1200
                  });
                  setTimeout(()=>{
                    that.$router.push({path:'/report-order-list'})
                },1200)
                }else{
                  Indicator.close();
                  Toast({
                    message: res.data.message,
                    position: 'middle',
                    duration:1000
                  });
                }
              }).catch((error)=> {
                  Indicator.close();
                Toast({
                  message: error,
                  position: 'middle',
                  duration:2000
                });
              });
              }

            }).catch((err) => {
                console.log(err)
              Toast({
                message: '图片上传失败',
                position: 'middle',
                duration:1000
              });
            });

            })
            }else{
              console.log('该图片已上传')
            }
          };
        }else{

          Indicator.open({
            text: '预约提交中...',
            spinnerType: 'snake'
          });
          var params = new URLSearchParams();
          const postData={
            carModel:that.$route.query.name,
            bookTimeStart:that.bookTimeStart,
            bookTimeEnd:that.bookTimeEnd,
            linkPhone:that.linkPhone,
            linkAddress:that.address,
            xAxis:that.xAxis,
            yAxis:that.yAxis,
            linkMan:that.linkMan,
            remark:that.comments,
            serviceType:that.selectService.itemType
          }
          params.append('demandData',JSON.stringify(postData));
          that.$axios({
            method: 'post',
            url:'gp/app/bookingOrderApp!saveBooking.do',
            data:params
          }).then((res)=>{
            console.log(res,11111)
            if(res.data.result==true){
            Indicator.close();
              Toast({
                message: '预约提交成功',
                position: 'middle',
                duration:1200
              });
              setTimeout(()=>{
                that.$router.push({path:'/report-order-list'})
              },1200)
          }else{
            Indicator.close();
            Toast({
              message: res.data.message,
              position: 'middle',
              duration:1000
            });
           setTimeout(()=>{
                window.location.reload();
            },1100)
          }
        }).catch((error)=> {
            Indicator.close();
          Toast({
            message: error,
            position: 'middle',
            duration:2000
          });
          setTimeout(()=>{
            window.location.reload();
        },1100)
        });
      }
      }
    }
  }
</script>

<style>

  .repair-store-order .app-main{
    padding:0 0 52px;
  }
  .repair-store-order .item-textarea{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 80px;
    border-radius: 0;
    border: 0;
    outline: 0;
    padding:4px 10px;
    font-size: 15px;
    width: 100%;
    box-shadow: 1px 1px 6px 2px rgba(0,0,0,0.08) inset;
  }
  .repair-store-order  .select-time-slot .mint-cell-wrapper{
    background: none;
    align-items: flex-start
  }
  .repair-store-order .date-list {
    display: inline-block;
    width: 100%;
    background: #fff;
    margin: 0 -6px;
    font-size: 0; }
  .repair-store-order .date-header{
    font-size: 16px;
  }
  /*.repair-store-order .service-list{*/
    /*padding:14px 12px;*/
  /*}*/
  .repair-store-order .date-item {
    display: inline-block;
    width:49%;
    padding: 0 6px;
    margin: 0 0 12px; }
  .repair-store-order .service-list .date-item{
    margin: 0;
  }

  .repair-store-order .date-item.active .date-title {
    background: none;
    border: 1px solid #26a2ff;
    color: #26a2ff; }
  .repair-store-order .service-list .date-item.active .date-title {
    background: #26a2ff;
    color: #fff; }
  .repair-store-order .date-item .date-title {
    background: #f6f8fa;
    display: block;
    padding:8px;
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
    border: 1px solid #f6f8fa; }
  .repair-store-order .comment-attr-list{
    margin:0;
  }
  .repair-store-order .comment-attr-list .date-item{
    width: 33.2%;
    margin:0 0 6px;
  }
  .repair-store-order .comment-attr-list .date-item .date-title{
    margin:0 0 6px;
    border-radius: 4px;
    border: 1px solid #26a2ff;
    background: #fff;
    color: #26a2ff;
  }
  .repair-store-order .date-select {
    width: 100%; }
  .repair-store-order .addon {
    position: relative;
    display: block;
    padding: 14px 12px 8px; }
  .repair-store-order .addon .action-seclect {
    position: absolute;
    top: 8px;
    right: 14px;
    padding: 6px 0;
    height: auto;
    font-size: 13px;
    text-align: center;
    width: 52px !important; }

  .repair-store-order .mint-field .mint-cell-wrapper{
    border-bottom:1px solid #eee;
    background:none;
    padding:10px;
    font-size: 15px;
    color: #666;

  }
  .repair-store-order .address-list{
    margin: 0;
    padding:10px 0;
    line-height: 20px;
  }
  .repair-store-order .module-service{
    margin:0 0 12px;
  }
  .repair-store-order .module-way{
    background: #fff;
    padding:16px 12px;
    margin: 0;
  }
  .repair-store-order .way-title{
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    color: #666;
  }
  .repair-store-order .way-list{
    margin: 0;
    display: inline-block;
    vertical-align: middle;
    width:79%;
    text-align: right;
  }
  .repair-store-order .way-item{
    display:inline-block;
    vertical-align: middle;
    background: #ccc;
    padding:5px 8px;
    margin-left:10px;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    font-size: 14px;
  }
  .repair-store-order .way-item.active{
    background:red;
  }
  .mint-checklist-title{
    margin: 0;
  }
  .repair-store-order .mint-checkbox-core{
    border-radius:3px
  }
  .repair-store-order .mint-checklist{
    background: #fff;
  }
  .repair-store-order .mint-field .mint-cell-value{
    text-align: right;
  }
  .repair-store-order .mint-field .mint-field-core{
    padding-left: 16px;
  }
  .repair-store-order .mint-checkbox-input:checked+.mint-checkbox-core{
    background-color: red;
    border-color: red;
  }
  .repair-store-order .mint-checkbox-label{
    font-size: 14px;
    color:#666;
  }
  .repair-store-order .product-content{
    background: #fff;
    margin:0 0 12px;
    padding: 12px;
    font-size:14px;
  }
  .repair-store-order .product-content .product-img{
    display: table-cell;
    vertical-align: top;
    padding-right: 12px;
    width: 32%;
  }
  .repair-store-order .product-content .product-img img{
    width: 100px;
    height: 100px;
  }
  .repair-store-order .product-content .product-details{
    position: relative;
    display: table-cell;
    vertical-align: top;
    width: 68%;
  }
  .repair-store-order .product-content .item{
    margin:0 0 4px;
  }
  .repair-store-order .product-content .item-title{
    font-size: 15px;
    color: #000;
    margin:0 0 6px;
    line-height: 22px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
    overflow: hidden;

  }
  .repair-store-order .product-content .item-price{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding:12px 0 0;
    color: red;
    font-size: 16px;
  }
  .repair-store-order .product-content .item-img{
    margin:0 0 10px;
  }

  .repair-store-order .module-block{
    background: #fff;
    margin:0 0 12px;
  }
  .repair-store-order .word-content{
    background: #fff;
    padding:14px 12px;
    font-size: 15px;
    color:#666;
    margin: 0;
    line-height: 20px;
    border-top:1px solid #f5f5f5;
    overflow: hidden;
  }
  .repair-store-order .price-add{
    padding: 6px 0;
  }
  .repair-store-order .price-add .input-price{
    width: 46px;
    margin-left: 2px;
    padding:6px;
    border: 1px solid #ddd;
    outline: none;
    border-radius: 3px;
    color:red;
    text-align: right;
  }

  .repair-store-order .button-content{
    padding:16px 16px ;
    font-size:0;
  }
  .repair-store-order .button-content .mint-button{
    width: 100%;
    font-size: 16px;
  }
  .repair-store-order .button-block-6{
    display: inline-block;
    width: 50%;
    padding:0 8px;
  }
  .deal-tips{
    padding:2px 12px;
    font-size: 15px;
    color:#666;
  }
  .repair-store-order .block-header{
    background-color:#f5f5f5;
    position: relative;
    display: block;
    padding:2px 12px 10px;
    font-size:14px;
  }
  .repair-store-order .block-header:before{
    background:#26a2ff;
    position: relative;
    top:-2px;
    display:inline-block;
    vertical-align: middle;
    width:2px;
    height:16px;
    content: '';
    margin-right:5px;
  }
  .module-date{
    padding:0 12px;
    margin:6px 0 8px;
    font-size: 15px;
    color:red;
  }
  .repair-store-order .pic-car .mint-swipe-items-wrap{
    height: 100px;
  }
  .repair-store-order .pic-car .mint-swipe-indicators{
    display: none;
  }

  .repair-store-order .me-popup-pic{
    width: 100%;
    height:100%;
  }
  .repair-store-order .me-popup-pic .mint-swipe,.repair-store-order .me-popup-pic .mint-swipe-items-wrap{
    height: 100% !important;
  }
  .mint-msgbox{
    width: 70% !important;
  }
  .repair-store-order .select-count {
    float: right;
    display: inline-block;
    border: 1px solid #eee;
    border-radius: 5px;
  }
  .repair-store-order .select-count .item {
    display: inline-block;
    vertical-align: middle;
    width:30px;
    height:28px;
    font-size:16px;
    text-align: center;
    font-weight: bold;
    line-height: 22px;
    margin: 0;
  }
  .repair-store-order .select-count .item-reduce {
    font-size: 20px;
    color: #0080e5;
    border-right: 1px solid #eee; }
  .repair-store-order .select-count .item-add {
    font-size:20px;
    color: #0080e5;
    border-left: 1px solid #eee;
  }
  .repair-store-order .select-count .item-input {
    width:32px;
    outline: none;
    border: none;
    font-weight: normal;}
  .repair-store-order .item-factory{
    border: 1px solid red;
    margin-left: 8px;
    padding:0 4px;
    border-radius: 3px;
    font-size: 12px;
    letter-spacing:1px;
  }

  .repair-store-order .img-upload-content{
    width:100%;
    margin: 0;
    padding:0 16px 16px;
  }
  .repair-store-order .img-upload-content .item{
    position: relative;
    width:30% !important;
    height:70px;
    padding:0 12px 12px 0;
    margin:16px 0 0;
  }
  .repair-store-order .img-upload-content img{
    width: 100%;
    height:70px;
  }
  .repair-store-order .img-upload-content .icon-shanchu{
    background:rgba(225,225,225,0.5) !important;
    position: absolute;
    top:0;
    right:12px;
    width: 20px;
    height: 20px;
    font-size:15px !important;
    color:#fff;
    text-align: center;
    line-height: 24px;
  }
  .repair-store-order .add-img{
    display: block;
    height:70px;
    padding:0;
    color: #ddd;
    line-height:70px;
    text-align: center;
    border:1px dashed #ddd;
  }
  .repair-store-order .add-img:before{
    display: block;
    margin:0 auto 4px;
    font-size: 28px;
  }
  .repair-store-order .popup-map{
    width: 100%;
    height: 100%;
  }
  .repair-store-order .button-content-bottom{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: #fff;
    display: flex;
    box-shadow: 0px -6px 4px 0px rgba(0, 0, 0, 0.03);
  }
  .repair-store-order .button-content-bottom .mint-button{
    display: flex;
    flex: 1;
    border-radius: 0;
    justify-content: center;
    font-size: 16px;
    box-shadow: none;
    height: 50px;

  }
  .mint-field-comments{
    padding:12px;
    display: none;
  }
  .mint-field-comments.active{
    display: block;
  }
  .mint-field-comments .mint-cell{
    display: inline-block;
    width: 33.2%;
  }
  .mint-field-comments .mint-cell .mint-checkbox{
    /*display: none;*/
  }
</style>
